<script lang="ts" setup>
import { h, ref } from "vue";
import { ElButton, ElInput } from "element-plus";
import { ProSelect } from "@/modules/package/form";
import EnumTag from "@/components/common/EnumTag.vue";

import ApiOrder from "@/api/order";
import ApiActivity from "@/api/activity";
import ApiMerchant from "@/api/merchant";
import { EnumOrderStatus } from "@/utils/enum";

import useRefund from "./useRefund";
import useProTable from "@/hooks/useProTable";

const refTable = ref();

const { refund } = useRefund(() => refTable.value?.refresh());

const tableColumns = [
  { label: "序号", prop: "id", width: 60 },
  { label: "活动信息", slot: "activityInfo" },
  { label: "订单编号", prop: "sn", width: 250 },
  {
    label: "订单金额",
    width: 100,
    slot: ({ row }: any) => `¥${(row.actual_price / 100).toFixed(2)}`,
  },
  {
    label: "订单状态",
    width: 100,
    slot: ({ row }: any) =>
      h(EnumTag, { options: EnumOrderStatus, value: row.order_state }),
  },
  // {
  //   label: "交易状态",
  //   minWidth: 40,
  //   slot: ({ row }: any) =>
  //     h(EnumTag, { options: EnumTradeStatus, value: row.trade_state }),
  // },
  // {
  //   label: "退款状态",
  //   minWidth: 40,
  //   slot: ({ row }: any) =>
  //     h(EnumTag, { options: EnumRefundStatus, value: row.refund_status }),
  // },
  // { label: "支付方式", prop: "pay_mode", minWidth: 40 },
  // { label: "手机号", prop: "mobile", minWidth: 100 },
  { label: "下单时间", prop: "create_time", width: 120 },
  {
    label: "操作",
    width: 100,
    slot: ({ row }: any) =>
      row.trade_state === 3 &&
      h(
        ElButton,
        {
          link: true,
          type: "danger",
          onClick: () => refund(row, 1),
        },
        "退款"
      ),
  },
];

const formItems = [
  {
    label: "订单编号",
    children: {
      type: ElInput,
      field: "sn",
      props: {
        clearable: true,
        placeholder: "请输入订单编号",
      },
    },
  },
  {
    label: "交易状态",
    children: {
      type: ProSelect,
      field: "trade_state",
      props: {
        clearable: true,
        options: [
          // 1:待支付 2:拉起支付 3:已支付 4:已取消 5:已退款
          { label: "待支付", value: 1 },
          { label: "支付中", value: 2 },
          { label: "已支付", value: 3 },
          { label: "已取消", value: 4 },
          { label: "已退款", value: 5 },
          { label: "退款中", value: 6 },
        ],
      },
    },
  },
  {
    label: "选择活动",
    children: {
      type: ProSelect,
      field: "act_id",
      props: {
        valueKey: "id",
        labelKey: "title",
        clearable: true,
        fetchUrl: ApiActivity.activityList,
        // fetchOptions: { defaultSearch: { act_id: Number(query.act_id) } },
        // optionPropRender(item: TActivity) {
        //   return {
        //     value: item.id,
        //     label: item.title + 'test'
        //   };
        // }
      },
    },
  },
  {
    label: "选择品牌",
    children: {
      type: ProSelect,
      field: "merchant_id",
      props: {
        valueKey: "id",
        labelKey: "merchant_title",
        clearable: true,
        fetchUrl: ApiMerchant.merchantList,
        // fetchOptions: { defaultSearch: { act_id: Number(query.act_id) } },
        // optionPropRender(item: TMerchant) {
        //   return {
        //     value: item.id,
        //     label: item.merchant_title
        //   };
        // }
      },
    },
  },
];

const [ProTable] = useProTable({
  fetchUrl: ApiOrder.depositList,
  fetchOptions: {
    foramtFetchParams(params) {
      const { type, value, ...rest } = params;
      if (value) Reflect.set(rest, type, value);
      return rest;
    },

    defaultSearch: {
      type: "nickname",
      value: "",
    },
  },
  tableOptions: {
    columns: tableColumns,
  },
  formOptions: {
    formItems,
  },
});
</script>
<template>
  <ProTable>
    <template #table-activityInfo="{ row }">
      <div>
        <span class="font-gray-500">活动名称:</span>{{ row.activity_title }}
      </div>
      <div>
        <span class="font-gray-500">品牌名称:</span>{{ row.merchant_title }}
      </div>
      <div><span class="font-gray-500">联系电话:</span>{{ row.mobile }}</div>
    </template>
  </ProTable>
</template>
